<template>
  <div class="common-page ">
    <div class="case-block">
      <div class="title">下划线跟随的导航栏</div>
      <div class="sample a">
        <ul class="nav">
          <li>不可思议的CSS</li>
          <li>导航栏</li>
          <li>光标下划线跟随</li>
          <li>PURE CSS</li>
          <li>HAHA Joseph</li>
        </ul>
      </div>
    </div>
    <div class="case-block">
      <div class="title">conic-gradient</div>
      <div class="sample b clearfix">
        <div class="model first"></div>
        <div class="model second"></div>
        <div class="model third"></div>
        <div class="model forth"></div>
        <div class="model fifth"></div>
        <div class="model sixth"></div>
        <div class="model seventh"></div>
        <div class="model eighth"> 
          <button>test</button>
        </div>
        <div class="model ninth"></div>
        <div class="model tenth"><button>test</button></div>
        <div class="model eleventh"></div>
      </div>
    </div>
    <div class="case-block">
      <div class="title">transform-origin 结合 scale 妙用</div>
      <div class="sample c clearfix">
        <div class="model first">下划线从左飞到右</div>
      </div>
    </div>  
  </div>
</template>
<style scoped lang="stylus">
@import '../../../../styles/mixins.styl'
$colors = ()
for $i in (0..20)
  append($colors, hsl($i *(360deg / 20), 100%, 50%))
$colors = unquote(join(', ', $colors))

// 将random() 放在 mixins 里面了
// random(min,max)
//   return floor(math(0, 'random')*(max - min + 1) + min)

$randomCols = ()
for $a in (0..random(20, 51))
  append($randomCols, rgba(random(0, 255), random(0, 255), random(0, 255), 1))
$randomCols = unquote(join(', ', $randomCols))

bandw($times = random(8, 40))
  $cols = ()
  $col
  for $i in (1..$times)
    if $i%2 == 0
      $col = rgba(0, 0, 0, random(0, 10) * 0.1)
    if $i%2 == 1
      $col = rgba(255, 255, 255, random(0, 10) * 0.1)
    append($cols, $col)
  $cols = unquote(join(', ', $cols))
  background-image: conic-gradient($cols)
.case-block
  width 100%
  padding 10px;
  border-bottom 1px solid lightgray
  .title
    font-size: 18px
    font-weight bold
  .sample
    padding 5px
.sample.a
  .nav
    padding: 0
    margin 0 auto
    display flex
    width max-content
    border 1px solid lightgray
    li
      position relative
      list-style none;
      padding 20px;
      &:before
        content: ''
        position absolute
        bottom 0
        left 100%
        height 0px
        width 0%
        transition: 0.2s all linear;
        border-bottom 2px solid black
    li:hover:before
      width 100%
      left: 0
    li:hover ~ li:before
      left 0  
.sample.b
  .model
    float left
    width 100px
    height 100px
    margin 5px
    border 1px solid black
  .model.first
    background conic-gradient(pink, yellow)
  .model.second
    border-radius 50%
    background conic-gradient(red, orange, yellow, green, teal, blue, purple, red)
  .model.third
    border-radius 50%
    background conic-gradient($colors)
  .model.forth
    border-radius 50%
    background conic-gradient(red 0, red 10%, blue 0, blue 30%, green 0, green 70%, yellow 0, yellow 100%)
  .model.fifth
    background-image conic-gradient(black 0, black 45deg, white 45deg, white 135deg, black 135deg, black 225deg, white 225deg, white 315deg, black 315deg, black 360deg)
  .model.sixth
    background repeat
    background-image conic-gradient(black 0 45deg, white 45deg 135deg, black 135deg 225deg, white 225deg 315deg, black 315deg 360deg)
    background-size 20px 20px;
  .model.seventh
    background-image repeating-conic-gradient(deeppink 0 15deg, yellowgreen 15deg 30deg)
  .model.eighth
    width 130px
    position: relative;
    overflow hidden;
    z-index: 1
    :before
      content ''
      display block;
      position absolute
      width 200%
      height 200%;
      left 50%
      top 50%
      border-radius 50%
      background no-repeat
      background-image repeating-conic-gradient(deeppink 0 15deg, yellowgreen 15deg 30deg);
      animation 2s bg-rotate linear infinite
      z-index -1
  .model.ninth
    background conic-gradient($randomCols)

  $randomTime = random(10, 20)s    
  .model.tenth
    width 170px;
    position: relative;
    overflow hidden;
    background-image radial-gradient(white, black)
    z-index: 1
    &:before, &:after
      content ''
      display block;
      position absolute
      width 200%
      height 200%;
      left 50%
      top 50%
      opacity: .5;
      z-index -1
      mix-blend-mode: overlay;
      animation $randomTime bg-rotate linear infinite
    &:before
      bandw()
    &:after
      bandw()
      animation-direction: reverse;
  .model.eleventh
    position: relative;
    width 200px
    height 100px
    border-radius 100px 100px 0 0;
    overflow: hidden;
    background no-repeat
    background-image conic-gradient(#EBD31B 0 18deg, #8DD22A 18deg 54deg, #58BE4E 54deg 90deg, transparent 90deg 270deg, #E63627 270deg 306deg, #F7860E 306deg 342deg, #EBD31B 342deg 360deg)
    background-size 100% 200%
    background-position 0 0px
    border: 0px solid white
    &:before
      content ''
      display block
      position absolute
      width 100%
      height 200%
      left 50%
      top 0%
      transform translate3d(-50%, 0%, 0) scale(0.4)
      border-radius 50%
      // padding-top 70%
      background white
@keyframes bg-rotate
  from
    transform translate3d(-50%, -50%, 0) rotate(0)
  to
    transform translate3d(-50%, -50%, 0) rotate(1turn)
.sample.c
  .model.first
    position relative
    display inline-block
    line-height 2
    &:before
      content ''
      position absolute
      display block
      width 100%
      height 1px
      left 0
      // right 0
      bottom 0px
      transition: transform .5s;
      transform: scaleX(0);
      transform-origin: 100% 0;
      border-bottom 1px solid red
    &:hover:before
      transform scaleX(1)
      transform-origin: 0% 0;

</style>
<script>
export default {
  name: 'CaseAView',
  props: {

  },
  data () {
    return {
    }
  },
  computed: {
     
  },
  created() {
  },
  mounted() {
    console.log(1 + 'a')
  },
  methods: {
  }
}
</script>